<template>

   <div>
       <table>
           <tr>
               <th></th>
               <th>产品名</th>
               <th>产品价格</th>
               <th>数量</th>
               <th>小计</th>
               <th>操作</th>
           </tr>
           <tr v-for="i in li" :key="i.id" >
               <td><input type="checkbox" value='i.id' v-model="i.select"></td>
               <td>{{i.pid.title}}</td>

               <td>{{i.pid.price}}</td>
               <td><button @click="num_add(i)">+</button><input v-model='i.num' style="width:2em"><button @click="num_sub(i)">-</button></td>
               <td>{{i.num*i.pid.price}}</td>
               <td><button @click="del(i.id)">删除</button></td>
           </tr>
       </table>
       <!-- <p >{{i.uid.username}}----------</p> -->
        <p>共{{num}}件,共{{num1}}元 </p>
        <button @click="xia">下单</button>
   </div>
<!-- 18547849808 -->
</template>

<script>
import Axios from 'axios'
export default {
   data(){
       return {
           li:[],   
           token:sessionStorage.getItem('token')
       }
   },
   methods:{
       xia(){
           let ids=[]
           for(let i of this.li){
              if (i.select){
                  ids.push(i.id)
              }
           }
            if (ids.length==0){
                   alert('请选择')
                   return
                   
            }
           Axios.post('http://127.0.0.1:8000/chi/chi?token='+this.token,{ids:ids,money:this.num1}).then(resp=>{
                console.log(resp.data)
                alert('下单成功')
                this.$router.push('tushu5')
           })
       },
       del(id){
           Axios.delete('http://127.0.0.1:8000/chi/chi?id='+id).then(resp=>{
               console.log(resp)
               this.$router.go(0)
               alert('删除成功')
           })
       },
       num_put(cart){
           let token=sessionStorage.getItem('token')
           if (!token){
               alert('先登录')
               this.$router.push('/HelloWorld')
               return
           }
           Axios.put('http://127.0.0.1:8000/chi/chi?token='+token,{'cart':cart.id,'num':cart.num}).then(res =>{
               console.log(res.data)
           })
       },
       num_add(shu){
           shu.num=shu.num+1
           this.num_put(shu)
       },
       num_sub(shu){
           shu.num=shu.num-1
           this.num_put(shu)
       }
   },
   created(){
       const token=sessionStorage.getItem('token')
       if (!token){
           this.$router.push('/HelloWorld')
           alert('请登录')
       }
       Axios.get('http://127.0.0.1:8000/chi/chi?token='+token).then(resp=>{
           console.log(resp)
           this.li=resp.data
       })
   },
   computed:{
    //    num(){
    //        let num=0
    //        for(let i in this.li){
    //            num++
    //        }
    //        return num
    //    },
    num(){
           let num=0
           for(let i of this.li){
               if(i.select==1)
                    num+=i.num
           }
           return num
       },
    //    num1(){
    //        let num=0
    //        for(let i of this.li){
    //            num+=i.pid.price
    //        }
    //        return num
    //    }
      num1(){
           let num=0,a=0
           for(let i of this.li){
               if(i.select==1)
               a=i.pid.price*i.num
               num+=a
           }
           return num
       }
   }
}
</script>

<style>

</style>